# Toaster

This component renders all the toasts, you can place it anywhere in your app.

## Customization

You can see examples of most of the scenarios described below on the [homepage](/).

### Multiple Toasters

You can render multiple Toaster components with different ids and target toasts to each one:

```jsx
<Toaster id="global" position="top-right" />
<Toaster id="canvas" position="bottom-left" />

<button onClick={() => toast('Global toast', { toasterId: 'global' })}>
  Show in Global Toaster
</button>
<button onClick={() => toast('Canvas toast', { toasterId: 'canvas' })}>
  Show in Canvas Toaster
</button>
```

### Expand

When you hover on one of the toasts, they will expand. You can make that the default behavior by setting the `expand` prop to `true`, and customize it even further with the `visibleToasts` prop.

```jsx
// 9 toasts will be visible instead of the default, which is 3.
<Toaster expand visibleToasts={9} />
```

### Position

Changes the place where all toasts will be rendered.

```jsx
// Available positions:
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
<Toaster position="top-center" />
```

### Styling all toasts

You can customize all toasts at once with `toastOptions` prop. These options will act as the default for all toasts.

```jsx
<Toaster
  toastOptions={{
    style: { background: 'red' },
    className: 'my-toast',
  }}
/>
```

### dir

Changes the directionality of the toast's text.

```jsx
// rtl, ltr, auto
<Toaster dir="rtl" />
```

### Custom ARIA label

You can customize the default ARIA label for the notification container and the toast close button.

```jsx
// example in Finnish
<Toaster containerAriaLabel="Ilmoitukset" toastOptions={{ closeButtonAriaLabel: 'Sulje' }} />
```

## API Reference

| Property              |                                                           Description                                                           |        Default |
| :-------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | -------------: |
| theme                 |                                       Toast's theme, either `light`, `dark`, or `system`                                        |        `light` |
| richColors            |                                           Makes error and success state more colorful                                           |        `false` |
| expand                |                                               Toasts will be expanded by default                                                |        `false` |
| visibleToasts         |                                                    Amount of visible toasts                                                     |            `3` |
| position              |                                             Place where the toasts will be rendered                                             | `bottom-right` |
| closeButton           |                                                Adds a close button to all toasts                                                |        `false` |
| offset                |                                              Offset from the edges of the screen.                                               |         `32px` |
| mobileOffset          |                    Offset from the left/right edges of the screen on screens with width smaller than 600px.                     |         `16px` |
| dir                   |                                                 Directionality of toast's text                                                  |          `ltr` |
| hotkey                |                                   Keyboard shortcut that will move focus to the toaster area.                                   |    `⌥/alt + T` |
| invert                |                                            Dark toasts in light mode and vice versa.                                            |        `false` |
| toastOptions          |               These will act as default options for all toasts. See [toast()](/toast) for all available options.                |         `4000` |
| gap                   |                                                Gap between toasts when expanded                                                 |           `14` |
| loadingIcon           |                                                Changes the default loading icon                                                 |            `-` |
| pauseWhenPageIsHidden | Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked. |        `false` |
| icons                 |                                                    Changes the default icons                                                    |            `-` |
